<template>
  <div class="goodsContainer">
    <div class="topContainer">
      <!-- 搜索框 -->
      <div class="searchBar">
        <van-search
          autocomplete="off"
          v-model="keyword"
          placeholder="请输入搜索关键词"
          clear-trigger="always"
          @clear="handleClear"
        />
      </div>
      <!-- 筛选框 -->
      <div class="filiterBar">
        <div class="left word active">综合</div>
        <div class="middle word">
          <span class="price">价格</span>
          <van-icon name="exchange" size="14" color="gray" />
        </div>
        <div class="right word">分类</div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div v-masonry class="waterFall" fit-width="true" transition-duration="0.5s" item-selector=".item">
      <div v-masonry-tile class="item" v-for="item in dataList" :key="item.id">
        <div class="goods">
          <p><img :src="item.listPicUrl" /></p>
          <p class="title">{{ item.name }}</p>
          <p class="price">￥{{ item.retailPrice }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'GoodsList'
})
</script>
<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { storeToRefs } from 'pinia'
import useSearchStore from '@/stores/search'
// 创建路由实例
const router = useRouter()
const route = useRoute()
// 创建仓库实例
const searchStore = useSearchStore()
// 从仓库中取出 数据
const { categoryList, searchGoodsData } = storeToRefs(searchStore)
// 定义变量
const keyword = ref('')
const start = ref(0) // 第几次展示数据
// 点击清除按钮
const handleClear = () => {
  keyword.value = ''
  router.back()
}

// 页面触底事件
// 思路： 页面被卷去高度 + 浏览器可视窗口的高度 >= 整个页面的高度    则触发触底事件
const scrollBottom = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const clientHeight = document.documentElement.clientHeight
  const scrollHeight = document.documentElement.scrollHeight
  if (scrollTop + clientHeight >= scrollHeight - 2) {
    start.value = dataList.value.length
  }
}

// 计算商品列表
const dataList = computed(() => {
  return searchGoodsData.value.slice(0, start.value + 6)
})

// 挂载完成时，获取当前搜索的商品列表
onMounted(() => {
  keyword.value = route.query.keyword as string // 从路由中拿到用户输入的关键字
  window.addEventListener('scroll', scrollBottom)
  // 获取商品和分类数据
  searchStore.getSearchData(route.query.keyword as string)
})

// 即将卸载时，清除触底事件
onBeforeUnmount(() => {
  searchStore.resetSearchData()
  window.removeEventListener('scroll', scrollBottom)
})
</script>

<style lang="less" scoped>
.goodsContainer {
  background-color: #eeeeee;

  .topContainer {
    background-color: #fff;
  }
  .searchBar {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
  }
  .filiterBar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 40px;
    background-color: #fafafa;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 10px;
    .word {
      &.active {
        color: red;
      }
    }
    .price {
      margin-right: 6px;
    }
  }
  .waterFall {
    width: 100%;
    margin: 0 auto;
    border-radius: 6px;
    .item {
      width: 170px;
      margin: 4px 6px;
      background-color: #fff;
      box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      padding: 10px;
      border-radius: 6px;
      .goods {
        width: 160px;
        display: flex;
        flex-direction: column;
      }
      img {
        width: 140px;
        border-radius: 10px;
      }
      .title {
        width: 80%;
        font-size: 15px;
        color: #12161c;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // overflow: hidden;
        margin: 0 auto;
      }
      .price {
        font-size: 20px;
        color: #fa1e32;
        font-weight: bold;
        margin-left: 14px;
        margin-top: 4px;
      }
    }
  }
}
</style>
